<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Vue | Ametshy_blog</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/my_blog/favicon.ico">
    <meta name="description" content="优秀的人如温玉，光华敛于内而不形于外。">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    
    <link rel="preload" href="/my_blog/assets/css/0.styles.95786cb5.css" as="style"><link rel="preload" href="/my_blog/assets/js/app.cff69041.js" as="script"><link rel="preload" href="/my_blog/assets/js/3.7a043b16.js" as="script"><link rel="preload" href="/my_blog/assets/js/1.c06040f4.js" as="script"><link rel="preload" href="/my_blog/assets/js/13.52369ac6.js" as="script"><link rel="prefetch" href="/my_blog/assets/js/10.59944bfc.js"><link rel="prefetch" href="/my_blog/assets/js/11.fb77baad.js"><link rel="prefetch" href="/my_blog/assets/js/12.52311b30.js"><link rel="prefetch" href="/my_blog/assets/js/14.b902e744.js"><link rel="prefetch" href="/my_blog/assets/js/15.4a0d7f91.js"><link rel="prefetch" href="/my_blog/assets/js/16.a086f842.js"><link rel="prefetch" href="/my_blog/assets/js/17.06159aba.js"><link rel="prefetch" href="/my_blog/assets/js/4.54a99e11.js"><link rel="prefetch" href="/my_blog/assets/js/5.5c893200.js"><link rel="prefetch" href="/my_blog/assets/js/6.d532c4e4.js"><link rel="prefetch" href="/my_blog/assets/js/7.f74d9027.js"><link rel="prefetch" href="/my_blog/assets/js/8.a07eb38b.js"><link rel="prefetch" href="/my_blog/assets/js/9.609694ba.js">
    <link rel="stylesheet" href="/my_blog/assets/css/0.styles.95786cb5.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container" data-v-3def6117><div data-v-3def6117><div id="loader-wrapper" class="loading-wrapper" data-v-2c578df8 data-v-3def6117 data-v-3def6117><div class="loader-main" data-v-2c578df8><div data-v-2c578df8></div><div data-v-2c578df8></div><div data-v-2c578df8></div><div data-v-2c578df8></div></div> <!----> <!----></div> <div class="password-shadow password-wrapper-out" style="display:none;" data-v-70a509e9 data-v-3def6117 data-v-3def6117><h3 class="title" data-v-70a509e9 data-v-70a509e9>Ametshy_blog</h3> <p class="description" data-v-70a509e9 data-v-70a509e9>优秀的人如温玉，光华敛于内而不形于外。</p> <label id="box" class="inputBox" data-v-70a509e9 data-v-70a509e9><input type="password" value="" data-v-70a509e9> <span data-v-70a509e9>Konck! Knock!</span> <button data-v-70a509e9>OK</button></label> <div class="footer" data-v-70a509e9 data-v-70a509e9><span data-v-70a509e9><i class="iconfont reco-theme" data-v-70a509e9></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-70a509e9>vuePress-theme-reco</a></span> <span data-v-70a509e9><i class="iconfont reco-copyright" data-v-70a509e9></i> <a data-v-70a509e9><span data-v-70a509e9>fh</span>
            
          <!---->
          2021
        </a></span></div></div> <div class="hide" data-v-3def6117><header class="navbar" data-v-3def6117><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/my_blog/" class="home-link router-link-active"><img src="/my_blog/logo.png" alt="Ametshy_blog" class="logo"> <span class="site-name">Ametshy_blog</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">Choose mode</h4> <ul class="color-mode-options"><li class="dark">dark</li><li class="auto active">auto</li><li class="light">light</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/my_blog/" class="nav-link"><i class="iconfont reco-home"></i>
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      文章分类
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/my_blog/categories/other/" class="nav-link"><i class="undefined"></i>
  other
</a></li><li class="dropdown-item"><!----> <a href="/my_blog/categories/font-end/" class="nav-link"><i class="undefined"></i>
  font-end
</a></li></ul></div></div><div class="nav-item"><a href="/my_blog/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><a href="/my_blog/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间轴
</a></div><div class="nav-item"><a href="/my_blog/docs/theme-reco/" class="nav-link router-link-active"><i class="iconfont reco-message"></i>
  文章列表
</a></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-3def6117></div> <aside class="sidebar" data-v-3def6117><div class="personal-info-wrapper" data-v-1a7245e0 data-v-3def6117><img src="/my_blog/avatar.jpg" alt="author-avatar" class="personal-img" data-v-1a7245e0> <h3 class="name" data-v-1a7245e0>
    fh
  </h3> <div class="num" data-v-1a7245e0><div data-v-1a7245e0><h3 data-v-1a7245e0>7</h3> <h6 data-v-1a7245e0>文章</h6></div> <div data-v-1a7245e0><h3 data-v-1a7245e0>3</h3> <h6 data-v-1a7245e0>标签</h6></div></div> <ul class="social-links" data-v-1a7245e0></ul> <hr data-v-1a7245e0></div> <nav class="nav-links"><div class="nav-item"><a href="/my_blog/" class="nav-link"><i class="iconfont reco-home"></i>
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      文章分类
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/my_blog/categories/other/" class="nav-link"><i class="undefined"></i>
  other
</a></li><li class="dropdown-item"><!----> <a href="/my_blog/categories/font-end/" class="nav-link"><i class="undefined"></i>
  font-end
</a></li></ul></div></div><div class="nav-item"><a href="/my_blog/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><a href="/my_blog/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间轴
</a></div><div class="nav-item"><a href="/my_blog/docs/theme-reco/" class="nav-link router-link-active"><i class="iconfont reco-message"></i>
  文章列表
</a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/my_blog/" aria-current="page" class="sidebar-link">Home</a></li><li><a href="/my_blog/docs/theme-reco/Vue.html" aria-current="page" class="active sidebar-link">Vue</a></li><li><a href="/my_blog/docs/theme-reco/css3.html" class="sidebar-link">css3</a></li><li><a href="/my_blog/docs/theme-reco/jQuery.html" class="sidebar-link">jQuery</a></li><li><a href="/my_blog/docs/theme-reco/someKnowledge.html" class="sidebar-link">someKnowledge</a></li><li><a href="/my_blog/docs/theme-reco/mobile.html" class="sidebar-link">移动端</a></li></ul> </aside> <div class="password-shadow password-wrapper-in" style="display:none;" data-v-70a509e9 data-v-3def6117><h3 class="title" data-v-70a509e9 data-v-70a509e9>Vue</h3> <!----> <label id="box" class="inputBox" data-v-70a509e9 data-v-70a509e9><input type="password" value="" data-v-70a509e9> <span data-v-70a509e9>Konck! Knock!</span> <button data-v-70a509e9>OK</button></label> <div class="footer" data-v-70a509e9 data-v-70a509e9><span data-v-70a509e9><i class="iconfont reco-theme" data-v-70a509e9></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-70a509e9>vuePress-theme-reco</a></span> <span data-v-70a509e9><i class="iconfont reco-copyright" data-v-70a509e9></i> <a data-v-70a509e9><span data-v-70a509e9>fh</span>
            
          <!---->
          2021
        </a></span></div></div> <div data-v-3def6117><main class="page" style="padding-right:0;"><section><div class="page-title"><h1 class="title">Vue</h1> <div data-v-71eee331><i class="iconfont reco-account" data-v-71eee331><span data-v-71eee331>fh</span></i> <i class="iconfont reco-date" data-v-71eee331><span data-v-71eee331>2021/9/16</span></i> <!----> <i class="tags iconfont reco-tag" data-v-71eee331><span class="tag-item" data-v-71eee331>Vue</span></i></div></div> <div class="theme-reco-content content__default"><h1 id="vue-js"><a href="#vue-js" class="header-anchor">#</a> Vue.js</h1> <h2 id="一、-vue-js简介"><a href="#一、-vue-js简介" class="header-anchor">#</a> 一、 Vue.js简介</h2> <h3 id="_1-vue-js是什么"><a href="#_1-vue-js是什么" class="header-anchor">#</a> 1. Vue.js是什么</h3> <p><strong>Vue.js</strong>也称为Vue，读音/vju:/，类似view，错误读音v-u-e
版本：v1.0 v2.0</p> <ul><li>是一个构建用户界面的框架</li> <li>是一个轻量级MVVM（Model-View-ViewModel）框架，和angular、react类似，其实就是所谓的数据双向绑定</li> <li>数据驱动+组件化的前端开发（核心思想）</li> <li>通过简单的API实现<strong>响应式的数据绑定</strong>和<strong>组合的视图组件</strong></li> <li>更容易上手、小巧</li></ul> <p>参考：<a href="https://cn.vuejs.org/" target="_blank" rel="noopener noreferrer">官网<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="_2-vue和angular的区别"><a href="#_2-vue和angular的区别" class="header-anchor">#</a> 2.vue和angular的区别</h3> <h4 id="_2-1-angular"><a href="#_2-1-angular" class="header-anchor">#</a> 2.1 angular</h4> <ul><li>上手较难</li> <li>指令以ng-xxx开头</li> <li>所有属性和方法都存储在$scope中</li> <li>由google维护</li></ul> <h4 id="_2-2-vue"><a href="#_2-2-vue" class="header-anchor">#</a> 2.2 vue</h4> <ul><li>简单、易学、更轻量</li> <li>指令以v-xxx开头</li> <li>HTML代码+JSON数据，再创建一个vue实例</li> <li>由个人维护：<strong>尤雨溪</strong>，华人，目前就职于阿里巴巴，2014.2开源了vue.js库</li></ul> <p>共同点：<code>都不兼容低版本IE</code>
对比：GitHub上vue的stars数量大约是angular的两倍</p> <h2 id="二、起步"><a href="#二、起步" class="header-anchor">#</a> 二、起步</h2> <h3 id="_1-下载核心库vue-js"><a href="#_1-下载核心库vue-js" class="header-anchor">#</a> 1. 下载核心库vue.js</h3> <div class="language- extra-class"><pre><code>bower info vue
npm init --yes
cnpm install vue --save
版本 v2.3.4 目前最新版本(2017.6.29)

vue2.0和1.0相比，最大的变化就是引入了Virtual DOM（虚拟DOM）,页面更新效率更高，速度更快
</code></pre></div><h3 id="_2-hello-world-对比angular"><a href="#_2-hello-world-对比angular" class="header-anchor">#</a> 2. Hello World（对比angular）</h3> <h4 id="_2-1-angular实现"><a href="#_2-1-angular实现" class="header-anchor">#</a> 2.1 angular实现</h4> <div class="language- extra-class"><pre><code>js:
	let app=angular.module('myApp',[]);
	app.controller('MyController',['$scope',function($scope){
		$scope.msg='Hello World';
	}]);
html:	
	&lt;html ng-app=&quot;myApp&quot;&gt;
		&lt;div ng-controller=&quot;MyController&quot;&gt;
			
		&lt;/div&gt;
	&lt;/html&gt;
</code></pre></div><h4 id="_2-2-vue实现"><a href="#_2-2-vue实现" class="header-anchor">#</a> 2.2 vue实现</h4> <div class="language- extra-class"><pre><code>js:
	new Vue({
		el:'#itany', //指定关联的选择器
		data:{ //存储数据
			msg:'Hello World',
			name:'tom'
		}
	});
html:
	&lt;div id=&quot;itany&quot;&gt;
		
	&lt;/div&gt;
</code></pre></div><h3 id="_3-安装vue-devtools插件-便于在chrome中调试vue"><a href="#_3-安装vue-devtools插件-便于在chrome中调试vue" class="header-anchor">#</a> 3. 安装vue-devtools插件，便于在chrome中调试vue</h3> <div class="language- extra-class"><pre><code>直接将vue-devtools解压缩，然后将文件夹中的chrome拖放到扩展程序中

//配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false
    Vue.config.devtools=false;
    Vue.config.productionTip=false; //阻止vue启动时生成生产消息
</code></pre></div><h2 id="三、-常用指令"><a href="#三、-常用指令" class="header-anchor">#</a> 三、 常用指令</h2> <h3 id="_1-什么是指令"><a href="#_1-什么是指令" class="header-anchor">#</a> 1. 什么是指令？</h3> <div class="language- extra-class"><pre><code>用来扩展html标签的功能
angular中常用的指令：
    ng-model
    ng-repeat
    ng-click
    ng-show/ng-hide
    ng-if
</code></pre></div><h3 id="_2-vue中常用的指令"><a href="#_2-vue中常用的指令" class="header-anchor">#</a> 2. vue中常用的指令</h3> <ul><li><p>v-model
双向数据绑定，一般用于表单元素</p></li> <li><p>v-for
对数组或对象进行循环操作，使用的是v-for，不是v-repeat
注：在vue1.0中提供了隐式变量，如$index、$key
在vue2.0中去除了隐式变量，已被废除</p></li> <li><p>v-on
用来绑定事件，用法：v-on:事件=&quot;函数&quot;</p></li> <li><p>v-show/v-if<br>
用来显示或隐藏元素，v-show是通过display实现，v-if是每次删除后再重新创建，与angular中类似</p></li></ul> <h2 id="四、-练习-用户管理"><a href="#四、-练习-用户管理" class="header-anchor">#</a> 四、 练习：用户管理</h2> <div class="language- extra-class"><pre><code>使用BootStrap+Vue.js   
</code></pre></div><h2 id="五、-事件和属性"><a href="#五、-事件和属性" class="header-anchor">#</a> 五、 事件和属性</h2> <h3 id="_1-事件"><a href="#_1-事件" class="header-anchor">#</a> 1. 事件</h3> <h4 id="_1-1-事件简写"><a href="#_1-1-事件简写" class="header-anchor">#</a> 1.1 事件简写</h4> <div class="language- extra-class"><pre><code>v-on:click=&quot;&quot;    
简写方式 @click=&quot;&quot;
</code></pre></div><h4 id="_1-2-事件对象-event"><a href="#_1-2-事件对象-event" class="header-anchor">#</a> 1.2 事件对象$event</h4> <div class="language- extra-class"><pre><code>包含事件相关信息，如事件源、事件类型、偏移量
target、type、offsetx
</code></pre></div><h4 id="_1-3-事件冒泡"><a href="#_1-3-事件冒泡" class="header-anchor">#</a> 1.3 事件冒泡</h4> <div class="language- extra-class"><pre><code>阻止事件冒泡：
    a)原生js方式，依赖于事件对象
    b)vue方式，不依赖于事件对象
        @click.stop
</code></pre></div><h4 id="_1-4-事件默认行为"><a href="#_1-4-事件默认行为" class="header-anchor">#</a> 1.4 事件默认行为</h4> <div class="language- extra-class"><pre><code>阻止默认行为：
    a)原生js方式，依赖于事件对象
</code></pre></div><h4 id="_1-5-键盘事件"><a href="#_1-5-键盘事件" class="header-anchor">#</a> 1.5 键盘事件</h4> <div class="language- extra-class"><pre><code>回车：@keydown.13 或@keydown.enter
上：@keydown.38 或@keydown.up

默认没有@keydown.a/b/c...事件，可以自定义键盘事件，也称为自定义键码或自定义键位别名
</code></pre></div><h4 id="_1-6-事件修饰符"><a href="#_1-6-事件修饰符" class="header-anchor">#</a> 1.6 事件修饰符</h4> <div class="language- extra-class"><pre><code>.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
</code></pre></div><h3 id="_2-属性"><a href="#_2-属性" class="header-anchor">#</a> 2. 属性</h3> <h4 id="_2-1-属性绑定和属性的简写"><a href="#_2-1-属性绑定和属性的简写" class="header-anchor">#</a> 2.1 属性绑定和属性的简写</h4> <div class="language- extra-class"><pre><code>v-bind 用于属性绑定， v-bind:属性=&quot;&quot;

属性的简写：
    v-bind:src=&quot;&quot; 简写为 :src=&quot;&quot;
</code></pre></div><h4 id="_2-2-class和style属性"><a href="#_2-2-class和style属性" class="header-anchor">#</a> 2.2 class和style属性</h4> <div class="language- extra-class"><pre><code>绑定class和style属性时语法比较复杂：
</code></pre></div><h2 id="六、-模板"><a href="#六、-模板" class="header-anchor">#</a> 六、 模板</h2> <h3 id="_1-简介"><a href="#_1-简介" class="header-anchor">#</a> 1. 简介</h3> <div class="language- extra-class"><pre><code>Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据
模板就是{{}}，用来进行数据绑定，显示在页面中
也称为Mustache语法
</code></pre></div><h3 id="_2-数据绑定的方式"><a href="#_2-数据绑定的方式" class="header-anchor">#</a> 2. 数据绑定的方式</h3> <div class="language- extra-class"><pre><code>a.双向绑定
    v-model
b.单向绑定    
    方式1：使用两对大括号{{}}，可能会出现闪烁的问题，可以使用v-cloak解决
    方式2：使用v-text、v-html
</code></pre></div><h3 id="_3-其他指令"><a href="#_3-其他指令" class="header-anchor">#</a> 3. 其他指令</h3> <div class="language- extra-class"><pre><code>v-once 数据只绑定一次
v-pre 不编译，直接原样显示
</code></pre></div><h2 id="七、-过滤器"><a href="#七、-过滤器" class="header-anchor">#</a> 七、 过滤器</h2> <h3 id="_1-简介-2"><a href="#_1-简介-2" class="header-anchor">#</a> 1. 简介</h3> <div class="language- extra-class"><pre><code>用来过滤模型数据，在显示之前进行数据处理和筛选
语法：
</code></pre></div><h3 id="_2-关于内置过滤器"><a href="#_2-关于内置过滤器" class="header-anchor">#</a> 2. 关于内置过滤器</h3> <div class="language- extra-class"><pre><code>vue1.0中内置许多过滤器，如：
    currency、uppercase、lowercase
    limitBy
    orderBy
    filterBy
vue2.0中已经删除了所有内置过滤器，全部被废除
如何解决：
    a.使用第三方工具库，如lodash、date-fns日期格式化、accounting.js货币格式化等
    b.使用自定义过滤器
</code></pre></div><h3 id="_3-自定义过滤器"><a href="#_3-自定义过滤器" class="header-anchor">#</a> 3. 自定义过滤器</h3> <div class="language- extra-class"><pre><code>分类：全局过滤器、局部过滤器
</code></pre></div><h4 id="_3-l-自定义全局过滤器"><a href="#_3-l-自定义全局过滤器" class="header-anchor">#</a> 3.l 自定义全局过滤器</h4> <div class="language- extra-class"><pre><code>使用全局方法Vue.filter(过滤器ID,过滤器函数)
</code></pre></div><h4 id="_3-l-自定义局部过滤器"><a href="#_3-l-自定义局部过滤器" class="header-anchor">#</a> 3.l 自定义局部过滤器</h4> <h2 id="八-发送ajax请求"><a href="#八-发送ajax请求" class="header-anchor">#</a> 八. 发送AJAX请求</h2> <h3 id="_1-简介-3"><a href="#_1-简介-3" class="header-anchor">#</a> 1.简介</h3> <div class="language- extra-class"><pre><code>Vue本身不支持发送AJAX请求，需要使用vue-resource、axios（官方推荐）等插件实现
axios 是一个基于Promise 的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时也不再对vue-resource进行维护
参考GitHub上axios的API文档
</code></pre></div><h3 id="_2-使用axios发送ajax请求"><a href="#_2-使用axios发送ajax请求" class="header-anchor">#</a> 2 使用axios发送AJAX请求</h3> <h4 id="_2-1-安装axios并引入"><a href="#_2-1-安装axios并引入" class="header-anchor">#</a> 2.1 安装axios并引入</h4> <div class="language- extra-class"><pre><code>+ npm install axios --save
+ 直接下载文件也可以
</code></pre></div><h4 id="_2-2基本用法"><a href="#_2-2基本用法" class="header-anchor">#</a> 2.2基本用法</h4> <div class="language- extra-class"><pre><code>axios([options])
axios.get(url,[option]);
    传参方式:
        1.通过url
axios.post(url,data,[options])
aixos默认发送数据时，数据格式是Request Payload,并非常用的Form Data ,所以参数必须要以键值对的形式传递才可以，
不能以json的方式来传参。
    传参方式:
        1.自己拼接为键值对
        2.使用transformRequest，在请求发送前进行转换
        3.如果使用模块化开发，可以使用qs（querystring）进行转换
axios本身并不支持发送跨域请求，没有提供相应的API，作者也没计划在axios添加支持发送跨域请求，所以只能使用第三方库
</code></pre></div><h3 id="_3-使用vue-resource发送跨域请求"><a href="#_3-使用vue-resource发送跨域请求" class="header-anchor">#</a> 3 使用vue-resource发送跨域请求</h3> <h4 id="_3-1-安装vue-resource并引入"><a href="#_3-1-安装vue-resource并引入" class="header-anchor">#</a> 3.1 安装vue-resource并引入</h4> <div class="language- extra-class"><pre><code>npm install vue-resource --save
</code></pre></div><h4 id="_3-2-基本用法"><a href="#_3-2-基本用法" class="header-anchor">#</a> 3.2 基本用法</h4> <div class="language- extra-class"><pre><code>使用this.$http发送请求
this.$http.get(url, [options])
this.$http.head(url, [options])
this.$http.delete(url, [options])
this.$http.jsonp(url, [options])
this.$http.post(url, [body], [options])
this.$http.put(url, [body], [options])
this.$http.patch(url, [body], [options])   
</code></pre></div><h4 id="_4-练习-百度列表"><a href="#_4-练习-百度列表" class="header-anchor">#</a> 4.练习 百度列表</h4> <h2 id="九-vue生命周期"><a href="#九-vue生命周期" class="header-anchor">#</a> 九. Vue生命周期</h2> <div class="language- extra-class"><pre><code>vue实例从创建到销毁的过程，称为生命周期，一共有8个阶段 
</code></pre></div><h2 id="十-计算属性"><a href="#十-计算属性" class="header-anchor">#</a> 十. 计算属性</h2> <div class="language- extra-class"><pre><code>计算属性也是用来存储数据，但具有以下几个特点
1.数据可以进行逻辑处理操作
2.对计算属性中的数据进行监视
</code></pre></div><h3 id="计算属性和方法"><a href="#计算属性和方法" class="header-anchor">#</a> 计算属性和方法</h3> <div class="language- extra-class"><pre><code>将计算属性的get函数定义为一个方法也可以实现类似的功能
区别：
1.计算属性是基于他的依赖进行更新的，只有在相关依赖发生改变时才能更新变化
2.计算属性是有缓存的，只要相关依赖没有改变，多次访问得到的值是之前缓存的结果 不会多次执行
</code></pre></div><h3 id="计算属性的组成-get和set"><a href="#计算属性的组成-get和set" class="header-anchor">#</a> 计算属性的组成(get和set)</h3> <div class="language- extra-class"><pre><code>计算属性由两部分组成，get和set，分别用来获取计算属性和设置计算属性
默认只有get，如果需要有set，需要自己添加
</code></pre></div><h2 id="十一-vue实例属性和方法"><a href="#十一-vue实例属性和方法" class="header-anchor">#</a> 十一. vue实例属性和方法</h2> <div class="language- extra-class"><pre><code>vm.$el
vm.$data
vm.$options
vm.$refs
...

vm.$mount()
vm.$destroy()
vm.$nextTick(callback)
vm.$set(object,key,value)
vm.$delete(object,key)
vm.$watch(data,callback,[options])
</code></pre></div><h2 id="十二-自定义指令"><a href="#十二-自定义指令" class="header-anchor">#</a> 十二. 自定义指令</h2> <div class="language- extra-class"><pre><code>分类:全局指令、局部指令
</code></pre></div><h3 id="自定义全局指令"><a href="#自定义全局指令" class="header-anchor">#</a> 自定义全局指令</h3> <div class="language- extra-class"><pre><code>使用全局方法Vue.directive(指令ID，定义全局对象)
</code></pre></div><h3 id="自定义局部指令"><a href="#自定义局部指令" class="header-anchor">#</a> 自定义局部指令</h3> <h4 id="练习-元素拖动"><a href="#练习-元素拖动" class="header-anchor">#</a> 练习 元素拖动</h4> <div class="language- extra-class"><pre><code>onmouseover onmouseout
onmousedown onmousemove onmouseup
</code></pre></div><h2 id="十三-过渡-动画"><a href="#十三-过渡-动画" class="header-anchor">#</a> 十三. 过渡（动画）</h2> <h3 id="_1-简介-4"><a href="#_1-简介-4" class="header-anchor">#</a> 1.简介</h3> <div class="language- extra-class"><pre><code>Vue 在插入，更新或者移除DOM时，提供多种不同的方式的应用过渡效果
本质上还是使用css3动画：transition  animation
</code></pre></div><h3 id="_2-基本用法"><a href="#_2-基本用法" class="header-anchor">#</a> 2.基本用法</h3> <div class="language- extra-class"><pre><code>使用transition组件，将要执行的动画元素包含在该组件内
&lt;transition name=&quot;fade&quot; 
    @before-enter=&quot;beforeEnter&quot;
    @enter=&quot;enter&quot;
    @after-enter=&quot;afterEnter&quot;
    @before-leave=&quot;beforeLeave&quot;
    @leave=&quot;leave&quot;
    @after-leave=&quot;afterLeave&quot;    
&gt;
    &lt;p v-show=&quot;flag&quot;&gt;&lt;/p&gt;
&lt;/transition&gt;
</code></pre></div><h4 id="_3-结合第三方动画库"><a href="#_3-结合第三方动画库" class="header-anchor">#</a> 3.结合第三方动画库</h4> <div class="language- extra-class"><pre><code>&lt;transition enter-active-class=&quot;animate__animated animate__bounceInLeft&quot; leave-active-class=&quot;animate__animated animate__bounceOutRight&quot;&gt;
    &lt;p v-show=&quot;flag&quot;&gt;&lt;/p&gt;
&lt;/transition&gt;
</code></pre></div><h4 id="_4-多元素动画"><a href="#_4-多元素动画" class="header-anchor">#</a> 4.多元素动画</h4> <h2 id="十四-组件"><a href="#十四-组件" class="header-anchor">#</a> 十四 组件</h2> <h3 id="_1-什么是组件"><a href="#_1-什么是组件" class="header-anchor">#</a> 1.什么是组件</h3> <div class="language- extra-class"><pre><code>什么是组件（component）：是vue.js最强大的功能之一，组件可以扩展HTML元素，封装可重用的代码
组件时自定义的元素（对象）
</code></pre></div><h3 id="_2-定义组件的方式"><a href="#_2-定义组件的方式" class="header-anchor">#</a> 2.定义组件的方式</h3> <div class="language- extra-class"><pre><code>方式1：先创建组件的构造器，然后又组件构造器创建组件
方式2：直接创建组件
</code></pre></div><h3 id="_3-组件的分类"><a href="#_3-组件的分类" class="header-anchor">#</a> 3.组件的分类</h3> <div class="language- extra-class"><pre><code>分为全局组件和局部组件
</code></pre></div><h3 id="_3-引用模板"><a href="#_3-引用模板" class="header-anchor">#</a> 3.引用模板</h3> <div class="language- extra-class"><pre><code>将组件的内容放到模板&lt;template&gt;&lt;/template&gt;里面并引用
</code></pre></div><h3 id="_5-动态组件"><a href="#_5-动态组件" class="header-anchor">#</a> 5.动态组件</h3> <div class="language- extra-class"><pre><code>&lt;component :is=&quot;&quot;&gt;&lt;/component&gt;
多个组件使用同一个挂载点，然后动态去切换他们
&lt;keep-alive&gt;&lt;/keep-alive&gt;
使用keep-alive 组件缓存非活动组件，可以保留状态，避免重新渲染，默认每次切换都会销毁非活动的组件并重新创建
</code></pre></div><h2 id="十五-组件间的数据传递"><a href="#十五-组件间的数据传递" class="header-anchor">#</a> 十五 组件间的数据传递</h2> <h3 id="_1-父子组件"><a href="#_1-父子组件" class="header-anchor">#</a> 1.父子组件</h3> <div class="language- extra-class"><pre><code>在一个组件内部定义另一个组件，称为父子组件
子组件只能在父组件的内部使用
默认情况下子组件无法访问父组件数据，每个组件实例的作用域都是独立的
</code></pre></div><h3 id="_2-组件间数据的通信-传递"><a href="#_2-组件间数据的通信-传递" class="header-anchor">#</a> 2.组件间数据的通信（传递）</h3> <h4 id="_2-1子组件访问父组件数据"><a href="#_2-1子组件访问父组件数据" class="header-anchor">#</a> 2.1子组件访问父组件数据</h4> <div class="language- extra-class"><pre><code>1.在调用子组件时，绑定想要获取的父组件中的数据
2.在子组件内部，使用props选项来声明获取的数据，来接收来自父组件的数据
注：对于一个组件而言组件中的数据共有3中形式，data、props、computed
总结：父组件通过props向下传递给子组件
</code></pre></div><h4 id="_2-2父组件访问子组件数据"><a href="#_2-2父组件访问子组件数据" class="header-anchor">#</a> 2.2父组件访问子组件数据</h4> <div class="language- extra-class"><pre><code>1.在子组件中使用vm.$emit(事件名,数据)触发一个事件，时间名自定义
2.父组件在使用子组件的地方去侦听子组件的事件,并在父组件中定义方法，用来获取数据
总结：子组件通过events给父组件发送消息，实际上就是子组件把自己的数据发送到父组件
</code></pre></div><h3 id="_3-单向数据流"><a href="#_3-单向数据流" class="header-anchor">#</a> 3.单向数据流</h3> <div class="language- extra-class"><pre><code>props是单向绑定的：当父组件属性发生变化时，将传导给子组件，但是不会反过来
而且不允许子组件直接修改父组件中的数据，报错
解决方式：
    方式1：如果子组件想把它作为局部数据来使用，可以将数据储存在另一个变量中再操作，不影响父组件中的数据
    方式2：如果子组件想修改数据并且同步更新到父组件
        两个方法：
            a.使用.sync (1.0版本中支持，2.0版本中不支持，2.3版本中又开始支持)
            b.可以将父组件中的数据包装成对象，然后在子组件中修改对象的属性(因为对象时引用类型，指向同一个内存空间) **推荐**
</code></pre></div><h3 id="_4-非父子组件间的通信"><a href="#_4-非父子组件间的通信" class="header-anchor">#</a> 4.非父子组件间的通信</h3> <div class="language- extra-class"><pre><code>非父子组件间的通信，可以通过一个空的Vue实例作为事件总线（事件中心）用它来触发事件和监听事件
</code></pre></div><h2 id="十六-slot内容分发"><a href="#十六-slot内容分发" class="header-anchor">#</a> 十六 slot内容分发</h2> <div class="language- extra-class"><pre><code>本意：位置、槽
作用：用来获取组件中的原内容，类似于angular中的transclude指令
</code></pre></div><h2 id="十七-vue-router-路由"><a href="#十七-vue-router-路由" class="header-anchor">#</a> 十七 vue-router 路由</h2> <h3 id="_1-简介-5"><a href="#_1-简介-5" class="header-anchor">#</a> 1.简介</h3> <div class="language- extra-class"><pre><code>使用Vue.js开发SPA（single page Application）单页面应用
根据不同的url地址，显示不同的内容，但显示在同一个页面中，称为单页面应用
</code></pre></div><p><a href="https://router.vuejs.org/zh/installation.html" target="_blank" rel="noopener noreferrer">参考<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
bower info vue-router
npm install vue-router --save</p> <h3 id="_2-基本用法-2"><a href="#_2-基本用法-2" class="header-anchor">#</a> 2.基本用法</h3> <div class="language- extra-class"><pre><code>a.布局
b.配置路由
</code></pre></div><h4 id="_2-1具体步骤"><a href="#_2-1具体步骤" class="header-anchor">#</a> 2.1具体步骤</h4> <div class="language- extra-class"><pre><code>1.定义相应的组件
    let Home = {
        template:'&lt;h3&gt;我是主页&lt;/h3&gt;'
    };
    let News = {
        template:'&lt;h3&gt;我是新闻&lt;/h3&gt;'
    }
2.配置路由
    const routes = [
        {path : '/home',component : Home},
        {path : '/news',component : News},
        {path : '*',redirect : Home} //路由重定向
    ];
3.创建路由实例
    const router = new VueRouter({
        routes,  //简写  相当于是routes = routes;
        // mode:'history'  //更改模式 默认为hash
        linkActiveClass:'active', //更改活动链接的class类名 默认为router-link-active

    });
4.创建根实例，并将路由挂载在Vue实例上
    let vm = new Vue({
        el:'#itany',
        router,  //注入路由
    })
</code></pre></div><h3 id="_3-路由嵌套和参数的传递"><a href="#_3-路由嵌套和参数的传递" class="header-anchor">#</a> 3.路由嵌套和参数的传递</h3> <div class="language- extra-class"><pre><code>传参的两种形式
    1.查询字符串：login?name=tom&amp;pwd=123
        {}
    2.rest风格url：regist/alice/456
        {}
</code></pre></div><h3 id="_4-路由实例方法"><a href="#_4-路由实例方法" class="header-anchor">#</a> 4.路由实例方法</h3> <div class="language- extra-class"><pre><code>router.push()    添加路由，功能上与&lt;router-link&gt;&lt;/router-link&gt; 一样
router.replace() 替换路由，不产生历史记录
</code></pre></div><h2 id="十八-单文件组件"><a href="#十八-单文件组件" class="header-anchor">#</a> 十八 单文件组件</h2> <h3 id="_1-vue-的文件"><a href="#_1-vue-的文件" class="header-anchor">#</a> 1 .vue 的文件</h3> <div class="language- extra-class"><pre><code>.vue文件，称为单文件组件，是Vue.js自定义的一种文件格式，一个.vue的文件就是一个单独的组件，在文件内封装了组件相关的代码  html css js

.vue文件由3部分组成
    &lt;template&gt;
        html
    &lt;/template&gt;
    &lt;script&gt;
        js
    &lt;/script&gt;
    &lt;style&gt;
        css
    &lt;/style&gt;
</code></pre></div><h3 id="_2-vue-loader"><a href="#_2-vue-loader" class="header-anchor">#</a> 2 vue-loader</h3> <div class="language- extra-class"><pre><code>浏览器并不认识.vue的文件，所以必须对.vue的文件进行加载解析，此时需要vue-loader进行解析
类似的loader还有很多，如html-loader、css-loader、css-loader、style-loader、babel-loader等
需要注意的是vue-loader是基于webpack的
</code></pre></div><h3 id="_3-webpack"><a href="#_3-webpack" class="header-anchor">#</a> 3 webpack</h3> <div class="language- extra-class"><pre><code>webpack是一个前端资源模块化的加载器和打包工具，它能够把各种资源都作为模块来使用和处理
实际上，webpack也是通过不同的loader将这些资源进行加载后打包，然后输出打包后文件
简单来说，webpack就是一个模块加载器，所有的资源都可以作为模块来加载，最后打包输出

[官网](https://www.webpackjs.com/)   

webpack版本：v1.x,v2.x
webpack 有一个核心配置文件：webpack.config.js，必须放在项目的根目录下
</code></pre></div><h3 id="_4-实例、步骤"><a href="#_4-实例、步骤" class="header-anchor">#</a> 4 实例、步骤</h3> <h4 id="_4-1-创建项目-目录结构"><a href="#_4-1-创建项目-目录结构" class="header-anchor">#</a> 4.1 创建项目,目录结构</h4> <div class="language- extra-class"><pre><code>webpack-demo
    |-index.html
    |-main.js    入口文件
    |-App.vue    vue文件
    |-package.json    工程文件
    |-webpack.config.js  webpack配置文件
    |-babelrc    babel 配置文件
</code></pre></div><h4 id="_4-2-编写app-vue"><a href="#_4-2-编写app-vue" class="header-anchor">#</a> 4.2 编写App.vue</h4> <h4 id="_4-3-安装相关模块"><a href="#_4-3-安装相关模块" class="header-anchor">#</a> 4.3 安装相关模块</h4> <div class="language- extra-class"><pre><code>npm install vue --save
npm install webpack -D
npm install webpack-dev-server -D
npm install vue-loader -D
npm install vue-html-loader -D
npm install css-loader -D
npm install vue-style-loader -D
npm install file-loader -D
npm install babel-loader -D
npm install babel-core -D
npm install babel-preset-env -D  //根据配置的运行环境自动启用需要的babel插件
npm install vue-template-compiler -D  //预编译模板
</code></pre></div><h4 id="_4-4-编写main-js"><a href="#_4-4-编写main-js" class="header-anchor">#</a> 4.4 编写main.js</h4> <h4 id="_4-5-编写webpack-config-js"><a href="#_4-5-编写webpack-config-js" class="header-anchor">#</a> 4.5 编写webpack.config.js</h4> <h4 id="_4-6-编写-babelrc"><a href="#_4-6-编写-babelrc" class="header-anchor">#</a> 4.6 编写.babelrc</h4> <h4 id="_4-7-编写package-json"><a href="#_4-7-编写package-json" class="header-anchor">#</a> 4.7 编写package.json</h4> <h4 id="_4-8-运行测试"><a href="#_4-8-运行测试" class="header-anchor">#</a> 4.8 运行测试</h4> <div class="language- extra-class"><pre><code>npm run dev 
</code></pre></div><h2 id="十九-vue-cli-脚手架"><a href="#十九-vue-cli-脚手架" class="header-anchor">#</a> 十九 vue-cli 脚手架</h2> <h3 id="_1-简介-6"><a href="#_1-简介-6" class="header-anchor">#</a> 1 简介</h3> <div class="language- extra-class"><pre><code>vue-cli 是一个vue的脚手架，可以快速的构造项目结构
vue-cli 本身集成了多种项目模板
    simple  很少用 太简单只有一个html文件
    webpack 包含ESLint代码规范检查 unit单元测试
    webpack-simple 没有ESLint代码规范检查 unit单元测试
    browserify 和webpack类似的工具，使用也比较多
    browserify-simple 简版
</code></pre></div><h3 id="_2-示例-步骤"><a href="#_2-示例-步骤" class="header-anchor">#</a> 2.示例，步骤</h3> <h4 id="_2-1-全局安装"><a href="#_2-1-全局安装" class="header-anchor">#</a> 2.1 全局安装</h4> <div class="language- extra-class"><pre><code>npm install vue-cli -g (旧版)  npm install -g @vue/cli（新版）
Vue CLI &gt;= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：
npm install -g @vue/cli-init

vue --version
</code></pre></div><h4 id="_2-2-初始化项目-生成项目模板"><a href="#_2-2-初始化项目-生成项目模板" class="header-anchor">#</a> 2.2 初始化项目，生成项目模板</h4> <div class="language- extra-class"><pre><code>vue init 模板名 项目名 (旧版)
vue create 项目名（新版）
vue ui   会打开一个页面进行配置
</code></pre></div><h4 id="_2-3-进入生成的项目目录-安装模块包"><a href="#_2-3-进入生成的项目目录-安装模块包" class="header-anchor">#</a> 2.3 进入生成的项目目录，安装模块包</h4> <div class="language- extra-class"><pre><code>cd vue-cli-demo
cnpm install
</code></pre></div><h4 id="_2-4-运行"><a href="#_2-4-运行" class="header-anchor">#</a> 2.4 运行</h4> <div class="language- extra-class"><pre><code>npm run dev   启动测试服务器
npm run bulid 将项目打包输出dist（public）目录，项目闪现的话要将dist目录拷贝到服务器上
</code></pre></div><h3 id="_2-eslint"><a href="#_2-eslint" class="header-anchor">#</a> 2 ESLint</h3> <p><a href="http://eslint.cn/" target="_blank" rel="noopener noreferrer">官网<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="二十-模块化开发"><a href="#二十-模块化开发" class="header-anchor">#</a> 二十 模块化开发</h2> <h3 id="_1-vue-router-进行模块化开发"><a href="#_1-vue-router-进行模块化开发" class="header-anchor">#</a> 1 vue-router 进行模块化开发</h3> <div class="language- extra-class"><pre><code>cnpm install vue-router --save
</code></pre></div><h4 id="_1-1-编辑main-js"><a href="#_1-1-编辑main-js" class="header-anchor">#</a> 1.1 编辑main.js</h4> <h4 id="_1-2-编辑app-vue"><a href="#_1-2-编辑app-vue" class="header-anchor">#</a> 1.2 编辑App.vue</h4> <h4 id="_1-3-编辑router-config-js"><a href="#_1-3-编辑router-config-js" class="header-anchor">#</a> 1.3 编辑router.config.js</h4> <h3 id="_2-axios-进行模块化开发"><a href="#_2-axios-进行模块化开发" class="header-anchor">#</a> 2 axios 进行模块化开发</h3> <div class="language- extra-class"><pre><code>cnpm install axios --save
使用axios的两种方法
    方式1：在每个组件中引入axios
    方式2：在main.js文件中全局引入axios 并添加到vue的原型中
</code></pre></div><h3 id="_3-为自定义组件添加事件"><a href="#_3-为自定义组件添加事件" class="header-anchor">#</a> 3 为自定义组件添加事件</h3> <div class="language- extra-class"><pre><code>@click.native  监听组件根元素的原生事件。
</code></pre></div><h2 id="二十一-element-ui"><a href="#二十一-element-ui" class="header-anchor">#</a> 二十一 Element UI</h2> <h3 id="_1-简介-7"><a href="#_1-简介-7" class="header-anchor">#</a> 1 简介</h3> <div class="language- extra-class"><pre><code>Element UI 是由饿了么团队提供的一套基于vue2.0的组件库，可以用来快速的大家网站，提高开发效率
[官网](https://element.faas.ele.me/#/zh-CN)
</code></pre></div><h3 id="_2-快速上手"><a href="#_2-快速上手" class="header-anchor">#</a> 2 快速上手</h3> <h4 id="_2-1-安装element-ui"><a href="#_2-1-安装element-ui" class="header-anchor">#</a> 2.1 安装element-ui</h4> <div class="language- extra-class"><pre><code>cnpm install element-ui --save
</code></pre></div><h4 id="_2-2-在main-js中引入组件"><a href="#_2-2-在main-js中引入组件" class="header-anchor">#</a> 2.2 在main.js中引入组件</h4> <div class="language- extra-class"><pre><code>1.全部引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; //该样式文件需要单独引入
Vue.use(ElementUI);
2.按需引入
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：
npm install babel-plugin-component -D
然后，将 .babelrc 修改为：
{
    &quot;presets&quot;: [[&quot;es2015&quot;, { &quot;modules&quot;: false }]],
    &quot;plugins&quot;: [
        [
        &quot;component&quot;,
        {
            &quot;libraryName&quot;: &quot;element-ui&quot;,
            &quot;styleLibraryName&quot;: &quot;theme-chalk&quot;
        }
        ]
    ]
}
接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/

new Vue({
el: '#app',
render: h =&gt; h(App)
});
</code></pre></div><h4 id="_2-3-在webpack-config-js中配置添加loader-旧版本需要此操作"><a href="#_2-3-在webpack-config-js中配置添加loader-旧版本需要此操作" class="header-anchor">#</a> 2.3 在webpack.config.js中配置添加loader（旧版本需要此操作）</h4> <div class="language- extra-class"><pre><code>css样式和字体图标都需要由相应的loader来加载，所以需要style-loader、css-loader
默认并没有style-loader模块，所以需要单独安装(要注意版本问题)
    cnpm install style-loader --save-dev
</code></pre></div><h4 id="_2-4-使用组件"><a href="#_2-4-使用组件" class="header-anchor">#</a> 2.4 使用组件</h4> <div class="language- extra-class"><pre><code>按照文档使用即可
</code></pre></div><h4 id="_2-5-使用less"><a href="#_2-5-使用less" class="header-anchor">#</a> 2.5 使用less</h4> <div class="language- extra-class"><pre><code>需要安装loader、需要两个，一个是less，另一个是less-loader
less-loader版本应安装为7.3.0，原因见以下文章（https://blog.csdn.net/m0_49159526/article/details/115957028）
cnpm install less
cnpm install less-loader@7.3.0
在webpack.config.js中添加loader （新版本不需要此步骤）
</code></pre></div><h2 id="二十二-自定义全局组件-插件"><a href="#二十二-自定义全局组件-插件" class="header-anchor">#</a> 二十二 自定义全局组件（插件）</h2> <div class="language- extra-class"><pre><code>全局组件（插件）：就是指可以在main.js中使用Vue.use()进行全局引入，然后在其他组件中就都可以使用了，如Vue-Router
普通组件（插件）：每次使用时都要引入，如axios
</code></pre></div><h2 id="二十二-vuex"><a href="#二十二-vuex" class="header-anchor">#</a> 二十二 Vuex</h2> <h3 id="_1-简介-8"><a href="#_1-简介-8" class="header-anchor">#</a> 1 简介</h3> <div class="language- extra-class"><pre><code>Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
简单来说，就是用来集中管理数据的、类似于React中的Redux、都是基于Flux的前端状态管理框架
</code></pre></div><h3 id="_2-基本用法-3"><a href="#_2-基本用法-3" class="header-anchor">#</a> 2 基本用法</h3> <h4 id="_2-1-安装vuex"><a href="#_2-1-安装vuex" class="header-anchor">#</a> 2.1 安装vuex</h4> <div class="language- extra-class"><pre><code>cnpm install vuex --save
</code></pre></div><h4 id="_2-2-创建store-js文件-在main-js导入并配置store选项"><a href="#_2-2-创建store-js文件-在main-js导入并配置store选项" class="header-anchor">#</a> 2.2 创建store.js文件，在main.js导入并配置store选项</h4> <h4 id="_2-3-编辑store-js文件"><a href="#_2-3-编辑store-js文件" class="header-anchor">#</a> 2.3 编辑store.js文件</h4> <div class="language- extra-class"><pre><code>vuex的核心时Store仓库，相当于是一个容器，一个store实例中包含以下的属性和方法：
    state    定义属性（状态、数据）
    getters  获取属性
    actions  用来定义方法（动作）
    commit   提交变化，修改数据的唯一方式就是显式的提交mutations
    mutations 定义变化，改变数据
注：不能直接修改数据，必须显示提交变化，目的是为了追踪到状态的变化
</code></pre></div><h4 id="_2-4-编辑app-vue文件"><a href="#_2-4-编辑app-vue文件" class="header-anchor">#</a> 2.4 编辑App.vue文件</h4> <div class="language- extra-class"><pre><code>在子组件中访问store对象的两种方式
    方式1：通过this.$store访问
    方式2：通过mapState、mapGetters、mapActions访问 Vuex 提供了两个方法：
        mapState      获取state
        mapGetters    获取getters属性（数据）
        mapActions    获取actions方法（动作）
</code></pre></div><h3 id="_3-更好的组织vuex项目结构"><a href="#_3-更好的组织vuex项目结构" class="header-anchor">#</a> 3 更好的组织Vuex项目结构</h3> <div class="language- extra-class"><pre><code>|-src
    |-store
        |-index.js
        |-getters.js
        |-actions.js
        |-mutations.js
        |-modules  //分为多个模块，每个模块都可以拥有自己的state、getters、actions、mutations
            |-user.js
            |-cart.js
            |-goods.js
            |-......
</code></pre></div><h2 id="二十三-项目结构"><a href="#二十三-项目结构" class="header-anchor">#</a> 二十三 项目结构</h2> <h3 id="_1-准备工作"><a href="#_1-准备工作" class="header-anchor">#</a> 1 准备工作</h3> <h4 id="_1-1-初始化项目"><a href="#_1-1-初始化项目" class="header-anchor">#</a> 1.1 初始化项目</h4> <div class="language- extra-class"><pre><code>vue init webpack itany
cd itany
cnpm install
cnpm install less less-loader -D 
cnpm install vuex -S
(-D 等同于 --save-dev -S 等同于 --save 具体区别看以下文章（https://www.cnblogs.com/0616--ataozhijia/p/9994721.html）)
cnpm install axios -S
npm run dev

(以上为旧版)

vue create itany
具体参数看这篇文章（https://blog.csdn.net/kakarotte007/article/details/115163920）
cd itany
npm run serve
</code></pre></div><h4 id="_1-2-项目资源"><a href="#_1-2-项目资源" class="header-anchor">#</a> 1.2 项目资源</h4> <div class="language- extra-class"><pre><code>|-reset.css
|-data.json
</code></pre></div><h4 id="_1-3-创建目录结构"><a href="#_1-3-创建目录结构" class="header-anchor">#</a> 1.3 创建目录结构</h4> <div class="language- extra-class"><pre><code>首先清除项目中的部分内容
创建如下目录结构
    |-data.json
    |-static
        |-css
            |-reset.css
</code></pre></div><h4 id="_1-4-配置api接口-模拟后台数据"><a href="#_1-4-配置api接口-模拟后台数据" class="header-anchor">#</a> 1.4 配置API接口，模拟后台数据</h4> <div class="language- extra-class"><pre><code>使用express框架启动一个node服务器，配置API接口，模拟后台数据
</code></pre></div></div></section> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">最后更新时间: </span> <span class="time">2021/9/17 下午4:58:22</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev"><a href="/my_blog/" class="prev router-link-active">
            Home
          </a></span> <span class="next"><a href="/my_blog/docs/theme-reco/css3.html">
            css3
          </a></span></p></div> <div class="comments-wrapper"><!----></div> <ul class="side-bar sub-sidebar-wrapper" style="width:0;" data-v-65c007c6></ul></main> <!----></div></div></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-a008c6ba data-v-a008c6ba><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-a008c6ba><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-a008c6ba></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-a008c6ba></path></svg></div><canvas id="vuepress-canvas-cursor"></canvas></div></div>
    <script src="/my_blog/assets/js/app.cff69041.js" defer></script><script src="/my_blog/assets/js/3.7a043b16.js" defer></script><script src="/my_blog/assets/js/1.c06040f4.js" defer></script><script src="/my_blog/assets/js/13.52369ac6.js" defer></script>
  </body>
</html>
